<template>
  <div id="home">
    <div class="pics">
      <el-carousel height="75vh">
        <el-carousel-item v-for="item in pics" :key="item">
          <img class="img" :src="item" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="nav">
      <div class="nav_body">
        <div v-for="(item, index) in navs" @click="push_to(item.path)" :key="index" class="nav_item">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pics: [require("../../assets/homepic1.jpg")],
      navs:[
        {
          name:"运单追踪",
          path:"/Workplace/searchexpress"
        },
        {
          name:"我要寄件",
          path:"/Workplace"
        },
        {
          name:"网点查询",
          path:"/Workplace/searchnode"
        },
        {
          name:"收寄标准",
          path:"/Workplace/More"
        },
        {
          name:"了解我们",
          path:"/More"
        }
      ]
    };
  },
  methods:{
    push_to(path){
      this.$router.push({
        path: path
      });
    }
  }
};
</script>

<style scoped>
.home {
  width: 100%;
  height: auto;
}
.pics {
  width: 100%;
}
.img {
  width: 100%;
  height: 100%;
}
.nav {
  width: 100%;
  height: 7vw;
  background-color: rgb(220, 30, 50);
}
.nav_body {
  width: 90%;
  height: 100%;
  margin: auto auto;
}
.nav_item {
  float: left;
  height: 100%;
  width: 20%;
  color: white;
  background-color: rgb(220, 30, 50);
  font-size: 1.3vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav_item:hover {
  background-color: white;
  color: rgb(220, 30, 50);
}
</style>